let workerData = [
    { id: 1, name: "张三", phoneNumber: "19063594522", age: "25", identityCard: "527781371354131211", gender: "女", paeration: "" },
    { id: 2, name: "放入光", phoneNumber: "14253537474", age: "57", identityCard: "527781371354131432", gender: "男", paeration: "" },
    { id: 3, name: "分区", phoneNumber: "17635252455", age: "49", identityCard: "524523451314331211", gender: "男", paeration: "" },
    { id: 4, name: "害得我", phoneNumber: "18673562422", age: "39", identityCard: "215425624253423213", gender: "男", paeration: "" },
    { id: 5, name: "哦哦哦", phoneNumber: "14653363455", age: "31", identityCard: "351341524242524231", gender: "女", paeration: "" },
    { id: 6, name: "张三丰", phoneNumber: "16735625132", age: "25", identityCard: "524251241341423112", gender: "男", paeration: "" },
]
function renderTbody(data) {
    $("#workerInterface tbody").empty();
    for (let i = 0; i < data.length; i++) {
        $("#workerInterface tbody").append(
            `
        <tr>
                      <td style="display:none;">${data[i].id}</td>
                      <td>${data[i].name}</td>
                      <td>${data[i].identityCard}</td>
                      <td>${data[i].gender}</td>
                      <td>${data[i].age}</td>
                      <td>${data[i].phoneNumber}</td>
                      <td>
                        <button type="button" class="btn btn-primary" data-id="${data[i].id}" id="change" class="btnstyle">修改</button>
                        <button type="button" class="btn btn-danger" data-id="${data[i].id}" id="remove" data-toggle="modal" data-target="#myModal">删除</button>
                      </td>
                    </tr>
        `
        )
    }
}
renderTbody(workerData);
//删除
let dataId;
$("#workerInterface tbody").on("click", "#remove", function (event) {
    dataId = parseInt($(event.target).attr("data-id"));
    console.log(dataId)
})
$('#identifier').modal('hide')
$("#is").on("click", function () {
    for (let i = 0; i < workerData.length; i++) {
        if (workerData[i].id === dataId) {
            workerData.splice(i, 1)
            i--
        }
    }
    renderTbody(workerData);
    $("#myModal").modal("hide");
})
//修改
$("#workerInterface tbody").on("click", "#change", function (event) {
    let dataId = parseInt($(event.target).attr("data-id"));
    $("#modifyModal").show();
    for (let i = 0; i < workerData.length; i++) {
        if (workerData[i].id === dataId) {
            $("#workerId").val(workerData[i].id);
            $("#workerName").val(workerData[i].name);
            $("#workerIdentityCard").val(workerData[i].identityCard);
            $("#workerGender").val(workerData[i].gender);
            $("#workerAge").val(workerData[i].age);
            $("#workerPhoneNumber").val(workerData[i].phoneNumber);
        }
    }
})
$("#cancelBtn").on("click", function () {
    $("#modifyModal").hide();
});
// 确认修改
$("#confirmBtn").on("click", (event) => {

    // 获取input的值   .val()获取输入input中的value值
    const id = $("#workerId").val();
    const name = $("#workerName").val();
    const identityCard = $("#workerIdentityCard").val();
    const gender = $("#workerGender").val();
    const age = $("#workerAge").val();
    const phoneNumber = $("#workerPhoneNumber").val();
    // 修改 workerdata
    for (let i = 0; i < workerData.length; ++i) {
        const item = workerData[i];
        //ifworker的id等于input自带的id值 则将其重新赋值
        if (item.id === parseInt(id)) {
            item.name = name;
            item.gender = gender;
            item.age = age;
            item.identityCard = identityCard;
            item.phoneNumber = phoneNumber;
        }
    }
    // 重新渲染
    renderTbody(workerData);
    // 隐藏弹窗
    $("#modifyModal").hide()
});
//添加新成员
let newWorkerObj={};
$("#add").on("click",function(){
    $("#addWorker").show();
})
//将新添加成员的id按顺序排列在数据中
let index = workerData.length;
function createId() {
    index += 1;
    return index;
}
$("#newName").on("blur", function (event) {
    $("#newName").empty();
    const value = event.target.value.trim();
    console.log(value)
    console.log(typeof value)
    if (!value) {
        return;
    }
    let key = "name";
    newWorkerObj[key] = value;
})
$("#newIdentityCard").on("blur", function (event) {
    $("#newIdentityCard").empty();
    const value = event.target.value.trim();
    console.log(value)
    console.log(typeof value)
    if (!value) {
        return;
    }
    let key = "identityCard";
    newWorkerObj[key] = value;
})
$("#newGender").on("blur", function (event) {
    $("#newGender").empty();
    const value = event.target.value.trim()
    console.log(value)
    console.log(typeof value)
    if (!value) {
        return;
    }
    let key = "gender";
    newWorkerObj[key] = value;
})
$("#newAge").on("blur", function (event) {
    $("#newName").empty();
    const value = event.target.value.trim()
    console.log(value)
    console.log(typeof value)
    if (!value) {
        return;
    }
    let key = "age";
    newWorkerObj[key] = value;
})
$("#newPhoneNumber").on("blur", function (event) {
    $("#newPhoneNumber").empty();
    const value = event.target.value.trim()
    console.log(value)
    console.log(typeof value)
    if (!value) {
        return;
    }
    let key = "phoneNumber";
    newWorkerObj[key] = value;
})
$("#confirmBtn1").on("click",function(){
    let id="id";
    newWorkerObj[id]=createId();
    workerData.push(newWorkerObj);
    renderTbody(workerData);
    $("#addWorker").hide();
})
$("#cancelBtn1").on("click",function(){
    $("#addWorker").hide();
})
